<template>
  <div id="Mapcontainer" class="map-amap-container"></div>
</template>
  
<script>
import * as AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map:null
    };
  },
  mounted() {
    this.createMap();
  },
  methods: {
    /**
     * 创建地图
     */
    createMap() {
      AMapLoader.load({
        key: "6027cc22082e43c4862d5466bb343740", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          // 是否加载 AMapUI，缺省不加载
          version: "1.1", // AMapUI 缺省 1.1
          plugins: [], // 需要加载的 AMapUI ui插件
        },
        Loca: {
          // 是否加载 Loca， 缺省不加载
          version: "1.3.2", // Loca 版本，缺省 1.3.2
        },
      })
        .then((AMap) => {
          this.map = new AMap.Map("Mapcontainer", {
            pitch: 60, // 地图俯仰角度，有效范围 0 度- 83 度
            viewMode: "3D", // 地图模式
          });
          //this.map.setMapStyle('amap://styles/fresh');
          this.map.setMapStyle(
            "amap://styles/859c6c9cd450052bcffe567687ee353d"
          );

          var marker1 = new AMap.Marker({
            position: new AMap.LngLat(114.029582, 22.605237),
            offset: new AMap.Pixel(-10, -10),
            icon: this.iconsta, ////'//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
            title: "北京",
          });

          var content =
            '<div class="marker-route marker-marker-bus-from" style="line-height:14px;">我是内容标点</div>';

          var marker2 = new AMap.Marker({
            content: content, // 自定义点标记覆盖物内容
            position: [116.397428, 30.0], // 基点位置
            offset: new AMap.Pixel(-17, -42), // 相对于基点的偏移位置
          });

          // 创建 AMap.Icon 实例：
          var icon = new AMap.Icon({
            size: new AMap.Size(40, 50), // 图标尺寸
            image: "//webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png", // Icon的图像
            imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片
          });

          // 将 Icon 实例添加到 marker 上:
          var marker3 = new AMap.Marker({
            position: new AMap.LngLat(116.405467, 32.907761),
            offset: new AMap.Pixel(-10, -10),
            icon: icon, // 添加 Icon 实例
            title: "北京",
            zoom: 13,
          });

          var style=[];

          var markerList = [marker1, marker2, marker3];

          var mass = new AMap.MassMarks(markerList, {
            opacity: 0.8,
            zIndex: 111,
            cursor: "pointer",
            style: style,
          });
          mass.setMap(this.map);
          //this.map.add(markerList);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
  
  <style lang="scss">
.map-amap-container {
  margin-left: 60px;
  height: 100%;
}
</style>